<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotate Image</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link type="text/css" href="https://raw.github.com/commons/common.css/master/build/common.css" rel="stylesheet">
<link type="text/css" href="main.less" media="screen" rel="stylesheet/less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Rotate</h1>

<div style="float:left">
<div class="rotater"></div>
<p>I will spin in a 2 second duration, forever</p>
<pre>
.rotater {
	background: url('../../_assets/img/spinner.gif');
	width:32px;
	height:32px;
	.rotate(2s);
}
</pre>
</div>

<div style="float:left">
<div class="tater2"></div>
<p>I will spin in a 20 second duration, forever</p>
<pre>
.tater2 {
	background: url('../../_assets/img/splitterbot.png');
	width:350px;
	height:350px;
	.rotate(20s);
}
</pre>
</div>

<div style="float:left">
<div class="tater3"></div>
<p>I will spin in a 2 second duration, twice</p>
<pre>
.tater3 {
	background: url('../../_assets/img/splitterbot.png');
	width:350px;
	height:350px;
	.rotate(2s, 2);
}
</pre>
</div>

</body>
</html>